<template>
	<div class="wrapper">
		<div class="text">支付成功！</div>
		<div class="credit">本次消费获得{{orderTotal}}积分！</div>
		
		<!-- 底部菜单部分 -->
		<ul class="footer">
			<li @click="toIndex">
				<i class="fa fa-home"></i>
				<p>首页</p>
			</li>
			<li>
				<i class="fa fa-compass"></i>
				<p>发现</p>
			</li>
			<li @click="toOrderList">
				<i class="fa fa-file-text-o"></i>
				<p>订单</p>
			</li>
			<li @click="toMy">
				<i class="fa fa-user-o"></i>
				<p>我的</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'after',
		data(){
			return{
				user: {},
				orderTotal: this.$route.query.orderTotal,
			}
		},
		created(){
			this.user = this.$getSessionStorage('user');
		},
		methods:{
			toIndex() {
				this.$router.push({
					path: '/index'
				});
			},
			toOrderList() {
				this.$router.push({
					path: '/orderList'
				});
			},
			toMy() {
				this.$router.push({
					path: '/my'
				});
			},
		},
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: azure;
	}
	.wrapper .text{
		width: 100%;
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-size: 6vw;
	}
	.wrapper .credit{
		width: 100%;
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-size: 4vw;
	}
	
	/****************** footer ******************/
	.wrapper .footer {
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.wrapper .footer li {
		/*li本身的尺寸完全由内容撑起*/
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
		user-select: none;
		cursor: pointer;
	}
	
	.wrapper .footer li p {
		font-size: 2.8vw;
	}
	
	.wrapper .footer li i {
		font-size: 5vw;
	}
</style>
